<template>
	<el-form
		ref="form"
		class="plr-1"
		label-position="top"
		:model="form"
		:disabled="saving"
		:rules="rules"
	>
		<el-form-item prop="content" label="客服名称">
			<el-input v-model="form.teacherName" placeholder="请填写客服名称" />
		</el-form-item>
		<el-form-item prop="content" label="内容">
			<el-input v-model="form.content" placeholder="请填写内容" />
		</el-form-item>
		<el-form-item prop="content" label="高度">
			<el-input v-model="form.height" placeholder="请填写高度" />
		</el-form-item>
		<el-form-item prop="leftBtnText" label="左侧按钮文字">
			<el-input v-model="form.leftBtnText" placeholder="请填写左侧按钮文字" />
		</el-form-item>
		<el-form-item prop="rightBtnText" label="右侧按钮文字">
			<el-input v-model="form.rightBtnText" placeholder="请填写右侧按钮文字" />
		</el-form-item>
		<template v-for="item, index in form.formList">
			<el-form-item :label="`问题` + (index + 1) " prop="formList">
				<el-input v-model="form.formList[index].question" :placeholder="`问题` + (index + 1) ">
					<el-button slot="append" icon="el-icon-minus" @click="minusQuestion(index)"></el-button>
				</el-input>
			</el-form-item>
			<el-form-item :label="`问题` + (index +1) + `选项`">
				<div style="margin-bottom: 10px; display: flex; justify-content: flex-start; flex-direction: row; flex-wrap: wrap;">
					<el-tag style="margin: 0 5px;" v-for="v, i in item.options" :key="i" closable @close="delOption(index, i)">{{ v }}</el-tag>
				</div>
				<div>
					<el-input :ref="`newOption` + (index + 1)" v-model="form.formList[index].newOption" placeholder="新增选项" size="small" >
						<el-button slot="append" icon="el-icon-plus" @click="newOption(index)"></el-button>
					</el-input>
				</div>
			</el-form-item>
		</template>
		<el-button type="primary" @click="newQuestion">新增问题</el-button>
		<setting-help ref="help" :helps="helps" />
	</el-form>
</template>

<script>
import { baseUrl, javaUrlApi } from "@/config/env";
import dayjs from "dayjs";
import { mapGetters } from "vuex";
import SettingHelp from "@/components/setting-help";
import miniList from "../../mixins/mini_list.js";
export default {
	mixins: [miniList],
	components: {
		SettingHelp
	},
	props: {
		saving: Boolean,
		view: {
			type: Object,
			default: () => ({})
		},
		adMpList: {
			type: Array,
			default: () => []
		}
	},
	computed: {
		...mapGetters(["token"]),
		previewList() {
			const { img } = this.form;
			return [this.$replaceUrl(img)];
		}
	},
	data() {
		return {
			baseUrl,
			javaUrlApi,
			fileData: {},
			form: this.view.options,
			rules: {
				content: [{ required: true, message: "请填写内容" }],
				skip_mp_id: [{ required: true, message: "请选择跳转小程序" }]
			},
			helps: [
				{
					title: "如何添加微信小程序客服",
					content: [
						{
							title: `登录微信小程序后台，选择左侧菜单上面的客服菜单`,
							img: [require(`@/assets/img/help/wechatContact/1-1.png`)]
						},
						{
							title: `添加需要和客户沟通的客服的微信号`,
							img: [require(`@/assets/img/help/wechatContact/1-2.png`)]
						}
					]
				}
			]
		};
	},
	methods: {
		openHelp(index) {
			this.$refs.help.open(index);
		},
		handleRemove() {
			// this.form = { img: "" };
			this.form.img = "";
		},
		percentageFormat(percentage) {
			return this.toFixed(percentage) + "%";
		},
		newOption(index) {
			this.form.formList[index].options.push(this.form.formList[index].newOption)
			this.form.formList[index].newOption = ''
		},
		delOption(index, i) {
			this.form.formList[index].options.splice(i, 1)
			console.log(this.form.formList, 'delOption')
		},
		newQuestion() {
			this.form.formList.push({
				question: '',
				newOption: '',
				options: [],
			})
		},
		minusQuestion(index) {
			this.form.formList.splice(index, 1)
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep {
	.el-upload,
	.el-upload-dragger {
		width: 100%;
	}
	.el-upload-dragger {
		height: 120px;
		.el-icon-upload {
			margin-top: 15px;
		}
	}
}
.images-item {
	border: solid 1px #e0e0e0;
	border-radius: 3px;
	padding: 10px 8px 14px;
	margin: 10px 0;
	position: relative;
	.remove {
		position: absolute;
		right: 10px;
		top: 10px;
		color: grey;
		cursor: pointer;
	}
	&__show {
		display: flex;
		align-items: center;
		.img {
			width: 100px;
			height: 80px;
			border: solid 1px #e0e0e0;
			border-radius: 3px;
		}
		&--right {
			flex: 1;
			overflow: hidden;
			padding-left: 10px;
		}
	}
	::v-deep .el-form-item {
		margin-bottom: 0;
	}
}
.tips{
  margin-top: 10px;
  font-size: 24px;
  color: #999;
}
</style>
